<!-- 
  @name: 加注机流水
  @date: 2020.3.9
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="topview fixed_top">
			<view class="total" :class="earnRadio > 0 ? '' : 't1'">
				<view class="item">
					<view class="num1">{{totalFillNum}}</view>
					<view class="note1">加注总量(kg)</view>
				</view>
				<!-- <view class="item" v-if="earnRadio > 0">
					<view class="num2">{{expectMoney}}</view>
					<view class="note21">预计收益(元)</view>
					<view class="note22">(收益比例:加注总额{{earnRadio2}})</view>
				</view> -->
				<view class="item">
					<view class="num1">{{totalFillMoney}}</view>
					<view class="note1">加注总额(元)</view>
				</view>
			</view>
			<view class="date-select" @tap="openCloseDate">
				<view>日期筛选</view>
				<image class="triangle" :class="[showPopup?'down':'']" src="/static/images/trigger.png" mode="aspectFill"></image> 
				<!-- <view class="_triangle" :class="showPopup ? 'atop' : 'abtm'"></view> -->
				<view class="date-content">
					<view>{{startTime}}</view>
					<view>{{endTime}}</view>
				</view>
			</view>
			
			<!-- <view class="icon" ></view> -->
		</view>
		
		<!-- 日期筛选弹窗 -->
		<date-select
			top="160"
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			@submit="onSubmit"
			@cancle="onCancle">
		</date-select>
		
		<!-- 列表 -->
		<view class="listview">
			<view
				class="card"
				v-for="(item, index) in lists"
				:key="item.recordId"
				@tap="$navigateTo('/pages/set-state/details?isMacrec=a&recordId=' + item.recordId)">
				<view class="left">
					<view class="top">{{item.fillTime}}</view>
					<view>{{item.userName}}</view>
				</view>
				<view class="right">
					<view class="top">{{item.fillMoney}}元</view>
					<view class="btm">加注<text class="bn">{{item.fillNum}}</text>kg</view>
				</view>
			</view>
		</view>
		
		<!-- 底部加载提示 -->
		<btm-load></btm-load>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				machineId: '',  //加注机id
				showPopup: false,  //是否显示日期筛选图层
				startTime: '',  //开始日期-提交
				endTime: '',  //结束日期-提交
				lists: [],  //列表
				page: 1,  //页码
				totalFillNum: '-',  //总加注量
				totalFillMoney: '-',  //总加注金额
				expectMoney: '-',  //预计收益
				earnRadio: 0,  //收益比例
				earnRadio2: '-',  //收益比例(百分比)
			}
		},
		onLoad(e) {
			this.machineId = e.machineId;
			this.endTime = this.$getToday();
			this.startTime = this.$getStartDay();
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			//下拉刷新
			pullDown() {
				this.showPopup = false;
				this.endTime = this.$getToday();
				this.startTime = this.$getStartDay();
				this.hasSelect();
			},
			//筛选后
			hasSelect() {
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.recordUrl + 'getfillrecordpage',
					data: {
						machineId: this.machineId,
						page: this.page,
						rows: this.$tmp.ROWS_RET,
						startTime: this.startTime,
						endTime: this.endTime
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					this.totalFillNum = res.totalFillNum;
					this.totalFillMoney = res.totalFillMoney;
					if(res.earnRadio && res.earnRadio > 0) {
						this.earnRadio = parseFloat(res.earnRadio);
						this.earnRadio2 = this.$toPercent(res.earnRadio);
						this.expectMoney = this.$operation(res.totalFillMoney, '*', res.earnRadio);
					}
					let arr = res.lstFillRecord;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			},
			//打开/关闭日期筛选弹窗
			openCloseDate() {
				this.showPopup = !this.showPopup;
			},
			//确认日期筛选
			onSubmit(start, end) {
				this.showPopup = false;
				this.startTime = start;
				this.endTime = end;
				this.hasSelect();
			},
			//取消日期筛选
			onCancle(bool) {
				this.showPopup = bool;
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区域 */
	.topview {
		width: 750rpx;
		height: 160rpx;
		padding-top: 30rpx;
		padding: 30rpx;
		background-color: $color-primary;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-left: 662rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15pw26ADwJQAAACerFU_7A674.png');
		}
		.total.t1 {
			margin-top: 50rpx;
		}
		.total {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			width: 400rpx;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.num1 {
					font-size: 36rpx;
					color: #CCDCFF;
					font-family: $font-family-num;
				}
				.note1 {
					font-size: 20rpx;
					color: $color-white;
					margin-top: 10rpx;
				}
				.num2 {
					font-size: 60rpx;
					color: $color-white;
					font-family: $font-family-num;
				}
				.note21 {
					font-size: 24rpx;
					color: $color-white;
					margin-top: 10rpx;
				}
				.note22 {
					font-size: 20rpx;
					color: #B2CBFF;
					margin-top: 8rpx;
				}
			}
		}
		
		.date-select {
			color: #FFFFFF;
			padding: 6rpx 20rpx;
			background-color: #276BFF;
			border-radius: 6rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: -20rpx;
			.triangle {
				width: 20rpx;
				height: 16rpx;
				flex-shrink: 0;
				margin-left: 10rpx;
				transition: all 0.3s;
				
				&.down {
					transform: rotateZ(180deg);
				}
			}
			>view {
				color: #FFFFFF;
			}
			
			.date-content {
				position: absolute;
				bottom: 55rpx;
				
				> view {
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	
	/* 列表 */
	.listview{
		width: 750rpx;
		margin-top: 160rpx;
	}
	.card {
		width: 750rpx;
		padding: 32rpx 30rpx;
		margin-bottom: $spacing-col;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
			.top {
				font-size: 24rpx;
				font-family: $font-family-num;
				margin-bottom: 28rpx;
			}
		}
		.right {
			text-align: end;
			.top {
				font-size: 36rpx;
				font-family: $font-family-num;
				margin-bottom: 18rpx;
			}
			.btm {
				font-size: 24rpx;
				.bn {
					font-family: $font-family-num;
				}
			}
		}
	}
	
</style>
